/**
 * Created by mapbar_front on 2019/8/9.
 */
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
const modalRoot = document.getElementById('modal-root');

class Modal extends Component{
    constructor(props){
        super(props);
        this.el = document.createElement('div');
    }
    componentDidMount(){
        modalRoot.appendChild(this.el);
    }
    componentWillUnmount(){
        modalRoot.removeChild(this.el);
    }
    render(){
        return ReactDOM.createPortal(
            this.props.children,
            this.el,
        )
    }
}
function Child(){
    return(
        <div>
            <button>click</button>
        </div>
    )
}

class Portals1 extends Component{
    constructor(props){
        super(props);
        this.state = {
            clicks:0,
        }
    }
    handleClick=()=>{
        this.setState(state=>({
            clicks: state.clicks+1
        }))
    }
    render(){
        return(
            <div onClick={this.handleClick}>
                <p>点击的次数:{this.state.clicks}</p>
                <Modal>
                    <Child/>
                </Modal>
            </div>
        )
    }
}
export default Portals1;
